<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .kuang {
            width: 262.8px;
            height: 100px;
            background-color: #ffffff;
            margin: 20px;
            float: left;
            border-radius: 5px;
            border: 1px solid #efefef;
        }
        
        div .images {
            width: 50px;
            height: 50px;
            margin-left: 25px;
            margin-top: 25px;
        }
        
        .text {
            margin-left: 100px;
            margin-top: -50px;
            text-align: center;
        }
        
        section div {
            width: 387.05px;
            height: 400px;
            background-color: #ffffff;
            float: left;
            margin: 15px;
            border: 1px solid #efefef;
        }
        
        section img {
            width: 387.05px;
            height: 120px;
            margin: 0 auto;
        }
        
        .kuang2 ul {
            text-align: center;
            list-style: none;
        }
        
        .kuang2 ul li {
            border-bottom: 1px solid #efefef;
            height: 35px;
            text-align: center;
        }
    </style>
</head>

<body>
    <article>
        <div class="kuang">
            <img src="./images/三农.a0e22daa.png" alt="" class="images">
            <div class="text">
                <p>校园新闻</p>
                <p>20</p>
            </div>
        </div>
        <div class="kuang">
            <img src="./images/科技.ab6abbf1.png" alt="" class="images">
            <div class="text">
                <p>通知公告</p>
                <p>20</p>
            </div>
        </div>
        <div class="kuang">
            <img src="./images/科普.d2ca1ca4.png" alt="" class="images">
            <div class="text">
                <p>学术活动</p>
                <p>30</p>
            </div>
        </div>
        <div class="kuang">
            <img src="./images/index.png" alt="" class="images">
            <div class="text">
                <p>媒体聚焦</p>
                <p>84</p>
            </div>
        </div>
    </article>
    <section>
        <div class="kuang2">
            <img src="./images/11.jpg" alt="">
            <ul>
                <li>校园新闻</li>
                <li>我校召开研究生教育和学科建设工作网络会议</li>
                <li>学校疫情防控工作领导小组召开第十五次工作会议</li>
                <li>test-charles-01</li>
                <li>test-charles-02</li>
                <li>test-charles-03</li>
                <li>test-charles-04</li>
                <li>test-charles-05</li>
            </ul>
        </div>
        <div class="kuang2">
            <img src="./images/22.jpg" alt="">
            <ul>
                <li>通知公告</li>
                <li>校领导调研东山校区疫情防控和企业复工工作</li>
            </ul>
        </div>
        <div class="kuang2">
            <img src="./images/33.jpg" alt="">
            <ul>
                <li>学术活动</li>
                <li>暂无数据</li>
            </ul>
        </div>
    </section>
</body>

</html>